<template>
    <div class="app-container">
        <el-page-header @back="goBack" content="申报类项目详情" style="padding: 8px 0 24px 0;">
        </el-page-header>
        <div class="evolve">
            <div class="evolve-top">
                <div class="evolve-title"><i class="el-icon-s-unfold"></i>最新进展</div>
                <div class="evolve-btn"><i class="el-icon-circle-plus-outline" style="cursor: pointer;"
                        @click="addEvolve"></i>新增</div>
            </div>
            <div class="evolve-tips">
                <div class="tips-count"></div>
                <div class="tips-item">点击新增弹出多行输入框</div>
            </div>
            <timeline :timeline-list="progressList" @edit="handleEditEvolve" @del="handleDelEvolve"></timeline>
        </div>
        <el-divider></el-divider>
        <el-row :gutter="20">
            <el-col :span="24">
                <div class="item">
                    <div class="label">项目名称：</div>
                    <div class="text">{{ formData.proName || '--' }}</div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="item">
                    <div class="label">负责人：</div>
                    <div class="text">{{ formData.proForName || '--' }}</div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="item">
                    <div class="label">负责人联系方式：</div>
                    <div class="text">{{ formData.proForPhone || '--' }}</div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="item">
                    <div class="label">申报类型：</div>
                    <div class="text">{{ selectDictLabel(dict.type.declare_type, formData.type) || '--' }}</div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="item">
                    <div class="label">项目状态：</div>
                    <div class="text">{{ selectDictLabel(dict.type.project_state, formData.proState) || '--' }}</div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="item">
                    <div class="label">项目开始时间：</div>
                    <div class="text">{{ formData.reportTime ? formData.reportTime.split(" ")[0] : '--' }}</div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="item">
                    <div class="label">资金奖补（万）：</div>
                    <div class="text">{{ formData.moneyPrize || '--' }}</div>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="item">
                    <div class="label">资料编写人：</div>
                    <div class="text">{{ formData.detailAuthor || '--' }}
                    </div>
                </div>
            </el-col>
            <div v-for="(item, index) in formData.proReportMoneys" :key="index">
                <el-col :span="8">
                    <div class="item">
                        <div class="label">收款时间：</div>
                        <div class="text">{{ item.payInTime || '--' }}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="item">
                        <div class="label">已收金额（万）：</div>
                        <div class="text">{{ item.alreadyInMoney || '--' }}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="item">
                        <div class="label">剩余金额（万）：</div>
                        <div class="text">{{ item.notInMoney || '--' }}</div>
                    </div>
                </el-col>
            </div>

            <el-col :span="12">
                <div class="item">
                    <div class="label">项目主管单位：</div>
                    <div class="text">{{ formData.chargeDept || '--' }}</div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="item">
                    <div class="label">主管单位负责科室：</div>
                    <div class="text">{{ formData.chargeForDept || '--' }}</div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="item">
                    <div class="label">科室联系方式：</div>
                    <div class="text">{{ formData.forDeptPhone || '--' }}</div>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="item">
                    <div class="label">项目说明：</div>
                    <div class="text">{{ formData.proShow || '--' }}</div>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="item">
                    <div class="label">项目备注：</div>
                    <div class="text">{{ formData.remark || '--' }}</div>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="item">
                    <div class="label">申报书附件：</div>
                    <div class="text annex-list">
                        <div v-if="reportBookAnnexList.length" v-for="(item, index) in reportBookAnnexList"
                            :key="index"><a :href="item.url" target="_blank">{{ getFileName(item.name) }}</a><i
                                @click="downloadFile(index, 1)">下载</i></div>
                        <div v-if="!reportBookAnnexList.length">--</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="item">
                    <div class="label">管理方法/政策：</div>
                    <div class="text annex-list">
                        <div v-if="manageMethodList.length" v-for="(item, index) in manageMethodList" :key="index"><a
                                :href="item.url" target="_blank">{{ getFileName(item.name) }}</a><i
                                @click="downloadFile(index, 2)">下载</i></div>
                        <div v-if="!manageMethodList.length">--</div>
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-dialog title="新增进展" :visible.sync="showAddEvolve" width="30%" center>
            <span>
                <el-form :model="evolveForm" label-width="80px" ref="evolveForm" :rules="rules">
                    <el-form-item label="进展时间" prop="addTime">
                            <el-date-picker v-model="evolveForm.addTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"
                                :style="{ width: '100%' }" placeholder="请选择项目开始时间" clearable></el-date-picker>
                    </el-form-item>
                    <el-form-item label="描述" prop="addEvolveText">
                        <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="evolveForm.addEvolveText">
                        </el-input>
                    </el-form-item>
                </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showAddEvolve = false">取 消</el-button>
                <el-button type="primary" @click="handleAddProjectProgress">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import timeline from './timeline.vue';
import { addProjectProgress, getProjectProgressList, updateProjectProgress, delProjectProgress } from '@/api/project/index';
export default {
    dicts: ['project_state', 'tender_state', 'declare_type', 'project_progress_state'],
    components: {
        timeline
    },
    props: {
        form: {
            type: Object,
            default: () => {
                return {}
            }
        },
    },
    name: "projectDetails",
    data() {
        return {
            evolveForm: {
                addTime: null,
                addEvolveText: undefined
            },
            rules: {
                addEvolveText: [
                    { required: true, message: '请输入进展描述', trigger: 'blur' },
                ],
                addTime: [
                    { required: true, message: '请选择日期', trigger: 'change' }
                ]
            },
            httpurl: process.env.VUE_APP_BASE_API,
            addEvolveText: '',
            showAddEvolve: false,
            formData: {},
            proSigningMileList: [],
            progressList: [],
            evolveId: '',
            manageMethodList: [],
            reportBookAnnexList: []
        };
    },
    watch: {
        form: {
            handler(val) {
                this.formData = JSON.parse(JSON.stringify(val));
                this.proSigningMileList = this.formData.proSigningMileList;
                if (val.manageMethod && val.manageMethod.length) {
                    this.conversionArray(val.manageMethod, 'manageMethodList')
                }
                if (val.reportBookAnnex && val.reportBookAnnex.length) {
                    this.conversionArray(val.reportBookAnnex, 'reportBookAnnexList')
                }
            },
            deep: true
        }
    },
    computed: {
        proReportId() {
            return this.$route.query.proId;
        },
        proType() {
            return this.$route.query.proType;
        }
    },
    created() {
        this.getProjectProgressList()
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        conversionArray(arr, name) {
            // 首先将值转为数组
            let list;
            if (Array.isArray(arr)) {
                list = arr;
            } else {
                list = arr.split(",");
            }
            // 然后将数组转为对象数组
            this[name] = list.map(item => {
                item = { name: item.ossId || item, url: item.url || item, ossId: item.ossId || item };
                return item;
            });
        },
        // 下载附件
        downloadFile(index, type) {
            this.$modal.confirm('确定要下载此文件吗？').then(() => {
                this.loading = true;
                window.location.href = this.httpurl + '/customUploadApplet/downloadPro?numId=' + index + '&id=' + this.proReportId + '&urlPath=' + this.httpurl + '&proType=' + this.proType + '&reportType=' + type;
            }).finally(() => {
                this.loading = false;
            });
        },
        // 获取文件名称
        getFileName(name) {
            // 如果是url那么取最后的名字 如果不是直接返回
            if (name.lastIndexOf("/") > -1) {
                return name.slice(name.lastIndexOf("/") + 1);
            } else {
                return name;
            }
        },
        // 编辑最新进展
        handleEditEvolve(val) {
            this.evolveForm.addEvolveText = val.details;
            this.evolveForm.addTime = val.addTime;
            this.evolveId = val.id;
            this.showAddEvolve = true;
        },
        // 新增最新进展
        addEvolve() {
            this.showAddEvolve = true;
        },
        // 删除最新进展
        handleDelEvolve(row) {
            this.$modal.confirm('是否确认删除当前数据项？').then(function () {
                return delProjectProgress(row.id);
            }).then(() => {
                this.getProjectProgressList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        // 新增最新进展
        handleAddProjectProgress() {
            this.$refs['evolveForm'].validate((valid) => {
                if (valid) {
                    if (this.evolveId) {
                        updateProjectProgress({
                            proReportId: this.formData.id,
                            details: this.evolveForm.addEvolveText,
                            addTime: this.evolveForm.addTime,
                            id: this.evolveId
                        }).then(res => {
                            if (res.code === 200) {
                                this.$message({
                                    message: '编辑成功',
                                    type: 'success'
                                });
                                this.evolveForm.addEvolveText = undefined;
                                this.evolveForm.addTime = null;
                                this.evolveId = '';
                                this.showAddEvolve = false;
                                this.getProjectProgressList()
                            }
                        })
                    } else {
                        addProjectProgress({
                            proReportId: this.formData.id,
                            details: this.evolveForm.addEvolveText,
                            addTime: this.evolveForm.addTime,
                        }).then(res => {
                            if (res.code === 200) {
                                this.$message({
                                    message: '新增成功',
                                    type: 'success'
                                });
                                this.evolveForm.addEvolveText = undefined;
                                this.evolveForm.addTime = null;
                                this.showAddEvolve = false;
                                this.getProjectProgressList()

                            }
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        // 获取项目最新进展列表
        getProjectProgressList() {
            getProjectProgressList({
                proReportId: this.proReportId
            }).then(res => {
                if (res.code === 200) {
                    this.progressList = res.data;
                }
            })
        },
    }
};
</script>
<style scoped lang="scss">
.item {
    display: flex;
    min-height: 38px;
    margin-bottom: 12px;
    align-items: center;

    .label {
        width: 140px;
        color: #666;
        font-size: 15px;
        text-align: right;
    }

    .text {
        height: 100%;
        display: flex;
        color: #444;
        align-items: center;
        // border: 1px solid #eee;
        border-radius: 8px;
        padding-left: 8px;
        width: calc(100% - 140px);
    }
}

.evolve {
    margin-top: 12px;

    .evolve-top,
    .evolve-tips {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .evolve-top {
        margin-bottom: 14px;
    }

    .evolve-title,
    .evolve-btn {
        display: flex;
        align-items: center;

        i {
            font-size: 18px;
            margin-right: 6px;
            color: #4883f1;
        }
    }

    .tips-item {
        color: #999;
        font-size: 13px;
    }

    .tips-count {
        font-size: 14px;
    }

    .evolve-tips {
        padding-bottom: 16px;
    }
}

.annex-list {
    div {
        display: inline-block;

        i {
            font-style: normal;
            color: #4883f1;
            font-size: 14px;
            margin-left: 6px;
            cursor: pointer;
        }

        margin-right: 14px;
    }
}
</style>